/**
 * 圆角标签（蓝色渐变面板样式）
 * @class
 * @extends graphic.div.BaseDiv
 */
import BaseDiv from "./BaseDiv.js";

class FilletLabel extends BaseDiv {
  /**
   * 水平对齐方式
   * @type {Cesium.HorizontalOrigin}
   * @private
   */
  _horizontalOrigin = Cesium.HorizontalOrigin.CENTER;

  /**
   * 垂直对齐方式
   * @type {Cesium.VerticalOrigin}
   * @private
   */
  _verticalOrigin = Cesium.VerticalOrigin.BOTTOM;

    /**
   * 横向偏移的px像素值
   * @type {Number}
   * @private
   */
  _offsetX = 0;

  /**
   * 纵向偏移的px像素值
   * @type {Number}
   * @private
   */
  _offsetY = 60;

  /**
   * 构造函数
   * @param {Object} options 配置参数
   * @param {Array.<Number>} [options.position=[111, 28, 0]] 经纬度[x,y,z]
   * @param {Array.<String>} options.content 文本内容数组
   * @param {Object} [options.style={}] 样式信息
   * @param {String} [options.style.color='#FFFFFF'] 文本颜色
   * @param {Number} [options.style.fontSize=14] 字体大小px
   * @param {Array.<String>} [options.style.backgroundColor=['#070acbbf', '#10eedc']] 背景渐变色数组，最后一个颜色值同时作为连接线颜色
   * @param {Cesium.DistanceDisplayCondition} [options.style.distanceDisplayCondition={near: 0.1, far: 1000000}] 可视范围
   * @param {Boolean} [options.style.pointerEvents=true] DIV是否可以鼠标交互
   * @param {Boolean} [options.style.userSelect=false] 是否可以选中文本
   */
  constructor(options = {}) {
    // 初始化默认样式
    const defaultStyle = {
      color: "#FFFFFF",
      fontSize: 14,
      backgroundColor: ["#070acbbf", "#10eedc"],
      distanceDisplayCondition: { near: 0.1, far: 1000000 },
      pointerEvents: true,
      userSelect: false,
    };

    // 合并样式
    const mergedOptions = {
      ...options,
      style: { ...defaultStyle, ...(options.style || {}) },
    };

    super(mergedOptions);

    // 初始化内容
    this._content = options.content || [];

    // 渲染文本内容
    this._renderContent();
  }

  /**
   * 获取或设置内容
   * @type {Array.<String>}
   */
  get content() {
    return this._content;
  }

  set content(value) {
    if (Array.isArray(value)) {
      this._content = value;
      this._renderContent();
    }
  }

  /**
   * 获取或设置图元样式
   * @type {Object}
   */
  get style() {
    return super.style;
  }

  set style(value) {
    super.style = value;
    this._updateLabelStyle();
  }

  /**
   * 销毁对象
   */
  destroy() {
    this._content = null;
    super.destroy();
  }

  /**
   * 转为 GeoJson 对象
   * @returns {Object} 转换后的对象
   */
  toGeoJson() {
    const geoJson = super.toGeoJson();
    // 添加文本特有的属性
    geoJson.properties.content = this._content;
    geoJson.properties.labelStyle = this._style;
    return geoJson;
  }

  /**
   * 渲染文本内容
   * @private
   */
  _renderContent() {
    if (!this._domEle) return;

    // 清空现有内容
    this._domEle.innerHTML = "";

    // 创建锚点容器（作为定位基础）
    const anchorContainer = document.createElement("div");
    anchorContainer.className =
      "cesium-extensions-fillet-label-anchor-container";

    // 创建内容容器
    const container = document.createElement("div");
    container.className = "cesium-extensions-fillet-label-container";

    // 添加每一行文本
    this._content.forEach((text) => {
      const line = document.createElement("div");
      line.className = "cesium-extensions-fillet-label-line";
      line.textContent = text || "";
      container.appendChild(line);
    });

    // 构建DOM结构：锚点容器 -> 内容容器
    anchorContainer.appendChild(container);

    // 将整个结构添加到DOM元素中
    this._domEle.appendChild(anchorContainer);

    // 更新标签样式
    this._updateLabelStyle();
  }

  /**
   * 更新标签样式
   * @private
   */
  _updateLabelStyle() {
    if (!this._domEle) return;

    const style = this._style;

    // 设置容器的样式
    const container = this._domEle.querySelector(
      ".cesium-extensions-fillet-label-container"
    );
    if (container) {
      // 设置文本颜色
      container.style.color = style.color;

      // 设置字体大小
      const lines = container.querySelectorAll(
        ".cesium-extensions-fillet-label-line"
      );
      lines.forEach((line) => {
        line.style.fontSize = `${style.fontSize}px`;

        // 直接设置行元素的userSelect属性，确保文本选择功能生效
        line.style.userSelect = style.userSelect ? "text" : "none";
      });

      // 设置背景渐变
      if (
        Array.isArray(style.backgroundColor) &&
        style.backgroundColor.length > 0
      ) {
        // 设置渐变CSS变量
        container.style.setProperty(
          "--gradient-color-1",
          style.backgroundColor[0]
        );

        if (style.backgroundColor.length > 1) {
          container.style.setProperty(
            "--gradient-color-2",
            style.backgroundColor[1]
          );
        } else {
          // 如果只有一个颜色，就使用相同颜色作为渐变终点
          container.style.setProperty(
            "--gradient-color-2",
            style.backgroundColor[0]
          );
        }

        // 使用数组最后一个颜色作为连接线颜色
        const lastColor =
          style.backgroundColor[style.backgroundColor.length - 1];
        container.style.setProperty("--connector-color", lastColor);
      }

      // 保留connectorColor的优先级（如果设置了的话）
      if (style.connectorColor) {
        container.style.setProperty("--connector-color", style.connectorColor);
      }

      // 直接设置容器的pointerEvents属性，确保鼠标交互功能生效
      container.style.pointerEvents = style.pointerEvents ? "auto" : "none";
    }

    // 更新DOM元素基础样式
    super._updateDomStyle();
  }
}

// 导出类
export default FilletLabel;
